<template>
  <view class="wrap">
    <uni-swipe-action-item
      :right-options="options"
      btn-width="100"
      @click="bindClick"
      :disabled="isDisable"
      @change="swipeChange($event, 1)"
    >
      <view class="item-swipe" @click="gotoDetail">
        <view class="title flex flex-ai-c">
          <image class="img" :src="info.brandImg" mode="aspectFit"></image>
          <text class="car-name flex-1">{{ info.carName }}</text>
          <text class="color-EB5C02">{{ info.statusStr }}</text>
        </view>
        <view class="item flex flex-ai-c">
          <view class="item-left">车牌号：</view>
          <view class="item-right">{{ info.carNum }}</view>
        </view>
        <view class="item flex flex-ai-c">
          <view class="item-left">客户：</view>
          <view class="item-right">{{ info.userName }}</view>
        </view>
        <view class="item flex flex-ai-c bb-2">
          <view class="item-left">到店时间：</view>
          <view class="item-right">{{ info.arriveTime }}</view>
        </view>
      </view>
    </uni-swipe-action-item>
    <view @click="gotoDetail">
      <view
        class="flex flex-jc-sa pad-t-b-20 border-bottom-1"
        v-if="currentTab === 2 || currentTab === 3"
      >
        <view class="width-50 u-border-right u-text-center"
          >派工单<text class="color-EB5C02">{{ info.workOrderInfo }}</text>
        </view>
        <view class="width-50 u-text-center"
          >付款订单<text class="color-EB5C02">{{ info.payOrderInfo }}</text>
        </view>
      </view>
      <view class="item flex flex-ai-c">
        <view class="item-left">服务类别：</view>
        <view class="item-right">
          <text
            class="item-right-text"
            v-for="(item, index) in info.service"
            :key="index"
            >{{ item.serviceName }}</text
          >
          <!-- <text class="item-right-text"
          >保养
          <text class="color-EB5C02">b1</text>
        </text> -->
        </view>
      </view>
      <view class="item flex flex-ai-c" v-if="info.status !== 0">
        <view class="item-left">服务技师：</view>
        <text
          class="item-right-text"
          v-for="(item, index) in info.worker"
          :key="index"
          >{{ item }}</text
        >
      </view>
      <view class="item flex flex-ai-c">
        <view class="item-left">三检服务：</view>
        <view class="item-right flex flex-jc-sb flex-1">
          <view class="item-check flex flex-ai-c">
            <i-icon
              v-if="info.isPTI"
              class="pr-5"
              icon="icongouxuan"
              type="multiple"
              size="28rpx"
            ></i-icon>
            <u-icon
              v-else
              name="checkmark-circle"
              color="#666"
              size="30rpx"
            ></u-icon>
            预检
          </view>
          <view class="item-check">
            <i-icon
              v-if="info.isInspection"
              class="pr-5"
              icon="icongouxuan"
              type="multiple"
              size="28rpx"
            ></i-icon>
            <u-icon
              v-else
              name="checkmark-circle"
              color="#666"
              size="30rpx"
            ></u-icon>
            上检
          </view>
          <view class="item-check">
            <i-icon
              v-if="info.isQuality"
              class="pr-5"
              icon="icongouxuan"
              type="multiple"
              size="28rpx"
            ></i-icon>
            <u-icon
              v-else
              name="checkmark-circle"
              color="#666"
              size="30rpx"
            ></u-icon>
            质检
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uniSwipeActionItem from '../../components/uni-swipe-action-item/uni-swipe-action-item'

export default {
  data() {
    return {
      options: [
        {
          text: '预检',
          style: {
            backgroundColor: '#0D83C8',
            width: '100rpx',
          },
        },
        {
          text: '接车\n施工',
          style: {
            backgroundColor: '#4FAF26',
            width: '100rpx',
          },
        },
        {
          text: '查看\n详情',
          style: {
            backgroundColor: '#FBB000',
            width: '100rpx',
          },
        },
        {
          text: '取消\n排队',
          style: {
            backgroundColor: '#EB5C02',
            width: '100rpx',
          },
        },
      ],
    }
  },

  props: {
    isDisable: {
      type: Boolean,
      default: true,
    },
    info: {
      type: Object,
      default() {
        return {}
      },
    },
    currentTab: {
      type: Number,
      default() {
        return 0
      },
    },
  },

  methods: {
    //按钮点击事件
    bindClick(e) {
      console.log(e)
      if (e.index === 0) {
        //预检
        if (this.info.isPTI) {
          uni.navigateTo({
            url:
              '/pages_afterSales/visualCheck/visualCheckReport?id=' +
              this.info.arriveId,
          })
        } else {
          uni.navigateTo({
            url:
              '/pages_afterSales/visualCheck/visualCheckOutside?id=' +
              this.info.arriveId,
          })
        }
      } else if (e.index === 3) {
        //取消排队
        this.handleOrder(30)
      } else {
        this.gotoDetail()
      }
    },

    //
    swipeChange(e, index) {},

    //跳转详情
    gotoDetail() {
      uni.navigateTo({
        url:
          '/pages_afterSales/arrivalRecordDeatil/arrivalRecordDeatil?id=' +
          this.info.arriveId,
      })
    },

    //操作到店单状态
    handleOrder(status) {
      this.$api.afterSales
        .changeOrderArriveStatus({
          arriveId: this.info.arriveId,
          status,
        })
        .then((res) => {
          console.log(res)
          uni.showToast({
            title: res.data,
            duration: 2000,
          })
          this.$emit('refresh')
        })
        .catch((e) => {})
    },
  },

  components: {
    uniSwipeActionItem,
  },
}
</script>

<style lang="scss" scoped>
.wrap {
  background: #fff;
  padding: 0 0 10rpx 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  width: calc(100vw - 48rpx);

  .item-swipe {
    width: 100%;
  }

  .title {
    font-size: 26rpx;
    font-weight: bold;
    color: #333333;
    padding-top: 10rpx;
    padding-right: 20rpx;

    .img {
      width: 50rpx;
      height: 50rpx;
      margin-right: 20rpx;
    }

    .car-name {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .item {
    height: 60rpx;
    margin-right: 20rpx;

    .item-left {
      width: 130rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #999999;
    }

    .item-right {
      font-size: 26rpx;
      font-weight: 500;
      color: #333333;

      .item-right-text {
        padding-right: 35rpx;
      }

      .item-check {
        font-size: 26rpx;
        font-weight: 500;
        color: #333333;

        .pr-5 {
          margin-right: 5rpx;
        }
      }
    }
  }

  .bb-2 {
    border-bottom: 2rpx solid #eee;
  }
}
.u-border-right {
  border-right: 2rpx solid #eeeeee;
}
/deep/ .uni-swipe_button {
  padding: 0 20rpx;
}
</style>
